<template>
    <div class="login-app">
    <div class="login-text">
      <div class="hr">
        欢迎登录！
      </div>
      <div>
        账号：<input type="text" class="login-inp act" v-model="Account" placeholder="账号">
      </div>
      <div>
        密码：<input type="text" class="login-inp psd" v-model="psd" placeholder="密码">
      </div>

      <router-link :to="{name:'todo',query:{'Account':Account,'psd':psd}}" class="submit">登录</router-link>
      <P class="tip">Tip:账号为admin，密码为：123456</P>
    </div>
    </div>
</template>

<script>
    export default {
      beforeRouteEnter(to,from,next){
        console.log('beforeRouteEnter')
        next()
      },
      beforeRouteUpdate(to,from,next){
        console.log('beforeRouteUpdate')
        next()
      },
      beforeRouteLeave(to,from,next){
        console.log('beforeRouteLeave')
        next()
      },
        name: "login",
      data(){
          return {
            Account:"",
            psd:''
          }
      },
      mounted() {
      },
      methods:{

      }
    }
</script>

<style lang="stylus" scoped>
.login-app
  width 100%
  height 100%

.login-text
  width 300px
  height 300px
  background #fff
  position relative
  left 50%
  top 50%
  transform translate(-50%,-50%)
  overflow hidden
  border-radius  15px

.login-text .hr
  height 60px
  width 100%
  border-bottom 2px #000 solid
  margin 0
  text-align center
  line-height 60px

.login-text div
  width 80%
  margin-top 25px
  margin-left 10%
  font-size 20px
  font-weight bold

.login-inp
  height 30px

.submit
  display block
  margin-top 20px
  margin-left 90px
  width 53%
  height 30px
  background #6099b3
  border none
  text-decoration none
  text-align center
  line-height 30px
  color #fff

.submit:hover
  border 1px #fff solid

.submit:active
  border 1px #262e39 solid
.tip
  color red
  font-weight bold
</style>
